import React from 'react';
import ReactDOM from 'react-dom';
// react-router-dom 的基本使用
// 1.导入组件
// 使用BrowserRouter路由模式
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class Login extends React.Component {
    // 如果下面的handleBtn没有使用箭头函数 则需要在这里进行this的绑定
    // constructor(props) {
    //     super()
    //     this.handleBtn = this.handleBtn.bind(this)
    // }
    handleBtn = () => {
        this.props.history.push('/home')
    }
    render() {
        return (
            <div>
                <p>登录页面</p>
                <button onClick={this.handleBtn}>登录</button>
            </div>
        )
    }    
}

// 创建Home
const Home = (props) => {
    const handleBack = () => {
        props.history.go(-1);
    }
    return (
        <div>
            <p>Home页面</p>
            <button onClick={handleBack}>返回登录页面</button>
        </div>
    )
}

const App = () => (
    <Router>
        <div>
            <h1>编程式路由</h1>
            <Link to="/login">去登录页面</Link>

            <Route path="/login" component={Login} />
            <Route path="/home" component={Home} />

        </div>
    </Router>
)
ReactDOM.render(<App></App>, document.getElementById('root'));